<template>
  <section class="todoapp">
    <!-- 头部部分 -->
    <!-- <header class="header">
      <h1>todos</h1>
      <input class="new-todo" placeholder="请输入任务名称" autofocus />
    </header> -->

    <!-- 主体部分 -->
    <!-- <section class="main">
      <input id="toggle-all" class="toggle-all" type="checkbox" />
      <label for="toggle-all">Mark all as complete</label>
      <ul class="todo-list">
        当任务已完成，可以给 li 加上 completed 类，会让元素加上删除线
         <li class="completed">
          <div class="view">
            <input class="toggle" type="checkbox" checked />
            <label>读万卷书</label>
            <button class="destroy"></button>
          </div>
        </li>
        <li>
          <div class="view">
            <input class="toggle" type="checkbox" />
            <label>行万里路</label>
            <button class="destroy"></button>
          </div>
        </li>
      </ul>
    </section> --> 

    <!-- 底部部分 -->
    <!-- <footer class="footer">
      <span class="todo-count"><strong>0</strong>剩余</span>
      <ul class="filters">
        <li>
          <a class="selected" href="#/">全部</a>
        </li>
        <li>
          <a href="#/active">进行中</a>
        </li>
        <li>
          <a href="#/completed">已完成</a>
        </li>
      </ul>
      <button class="clear-completed">清除已完成</button>
    </footer> -->
<TodoHeader @addList="addList"></TodoHeader>
<TodoBody :list="list" @delList= "delList" @changeStatus= "changeStatus" :isDonee="isDonee" @isDoneee="isDoneee"></TodoBody>
    <TodoFooter :fn="fn" @clear="clear" :isDoneAll="isDoneAll"></TodoFooter>
  </section>
</template>

<script>
import TodoHeader from './components/TodoHeader.vue'
import TodoBody from './components/TodoBody.vue'
import TodoFooter from './components/TodoFooter.vue'
export default {
  components:{
    TodoFooter,
    TodoBody,
    TodoHeader
  },
data(){
return{
  list:JSON.parse(localStorage.getItem('luo')) || [
      { id: 1, name: '吃饭', isDone: true },
      { id: 2, name: '睡觉', isDone: false },
      { id: 3, name: '打豆豆', isDone: true }
    ]
}
},
methods:{
  delList(id){
    this.list = this.list.filter(item => item.id !== id)
  },
  changeStatus(id){
    const res = this.list.find(item => item.id === id)
    res.isDone = !res.isDone
  },
  addList(value){
const obj = {id: +new Date(), name: value ,isDone: false}
this.list.push(obj)
  },
clear(){
  this.list = this.list.filter(item => !item.isDone)
},
isDoneee(value){
this.list.forEach(item => {
  item.isDone = value
});
}
},
// 计算属性
computed: {
  fn(){
    return this.list.filter(item => !item.isDone).length
  },
  isDoneAll(){
return this.list.some(item => item.isDone)
  },
  isDonee(){
    return this.list.every(item => item.isDone)
  }
},
watch: {
  list:{
    immediate: true,
    deep:true,
    handler(value){
      localStorage.setItem('luo',JSON.stringify(value))
    }
  }
}


}
</script>

<style></style>
